<template>
    <section>
    <div class="header">
        <el-form label-position="left" :model="search">
          <el-form-item  label="搜索" label-width="50px">
              <el-input
              v-model="search.keyword"
              style="width:200px"
              clearable
          placeholder="输入关键字搜索">
<el-button slot="append" icon="el-icon-search"  @click.native="queryList(1)"></el-button>
</el-input></el-form-item>
        </el-form>
        <div style="text-align: right;" v-if="showMoreBtn">
         <el-button type="text" @click.native="close" size="mini">取消</el-button>
          <el-button type="primary" size="mini" @click="handelOk">确定</el-button>
         <el-button  type="warning" @click.native="toAdd" size="mini">新建</el-button>
        </div>
      </div>
    <el-table
    size="small"
    ref="tabelRef"
    :header-cell-class-name="cellClass"
    :data="list"
    @selection-change="handelSelect"
    highlight-current-row>
        <el-table-column type="selection" width="50"> </el-table-column>
        <el-table-column  show-overflow-tooltip property="contactsName" label="姓名">
          <template slot-scope="scope">
              {{scope.row.contactsName}}{{scope.row.primaryContacts==1?'(首要联系人)':''}}
          </template>
        </el-table-column>
        <el-table-column  show-overflow-tooltip  property="mobile" label="手机号"></el-table-column>
        <el-table-column  show-overflow-tooltip property="position" label="职位"></el-table-column>
        <el-table-column  property="agentSeal" label="是否可以盖章" width="100" :formatter="formatterAgentSeal"></el-table-column>
        <el-table-column  show-overflow-tooltip property="remark" label="备注"></el-table-column>
    </el-table>
    <div>
        <el-button type="" :disabled="!hasPrevious" @click.native="handlePrevClick">上一页</el-button>
        <el-button type="" :disabled="!hasNext" @click.native="handleNextClick">下一页</el-button>
    </div>
    <div style="text-align: right; margin: 0">
        <el-button size="mini" type="text" @click="close">取消</el-button>
        <el-button type="primary" size="mini" @click="handelOk">确定</el-button>
    </div>
  <Detail-dialog title="新增客户联系人" width="60" :closeOnClickModal="false" :show.sync="show" modal :top="2" @close="closeContact" @save="handleSaveContacts">
      <el-form
      :model="contactInfo"
      label-width="90px"
      :rules="rules"
      ref="contactsForm">
    <el-row>
      <el-col :span="12">
        <el-form-item label="姓名" prop="contactsName">
        <el-input class="wp-form-280" v-model.trim="contactInfo.contactsName" placeholder="姓名" clearable></el-input>
       </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="性别" prop="gender">
        <el-select class="wp-form-280" v-model="contactInfo.gender" placeholder="性别" clearable>
          <el-option label="男" :value="1"></el-option>
          <el-option label="女" :value="0"></el-option>
        </el-select>
      </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
       <el-form-item label="手机号码" prop="mobile">
        <el-input
          class="wp-form-280"
          v-model="contactInfo.mobile"
          placeholder="手机号码"
          maxlength="11" clearable
        ></el-input>
      </el-form-item>
      </el-col>
      <el-col :span="12">
       <el-form-item label="邮箱" prop="email">
              <el-input
               class="wp-form-280"
                v-model.trim="contactInfo.email"
                placeholder="邮箱"
                clearable
              ></el-input>
            </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="是否可盖章" prop="agentSeal">
      <el-select class="wp-form-280" v-model="contactInfo.agentSeal" placeholder="代表公司盖章">
        <el-option label="可以" :value="1"></el-option>
        <el-option label="不可以" :value="0"></el-option>
      </el-select>
    </el-form-item>
      <el-form-item label="首要联系人" prop="primaryContacts">
        <el-switch
          v-model="contactInfo.primaryContacts"
          :active-value="1"
          :inactive-value="0"
        ></el-switch>
      </el-form-item>
            <el-form-item label="职务">
        <el-input v-model="contactInfo.position" placeholder="职务" clearable></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="contactInfo.address" placeholder="地址" clearable></el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input
          type="textarea"
          v-model="contactInfo.remark"
          placeholder="备注"
        ></el-input>
      </el-form-item>
    </el-form>
  </Detail-dialog>
    </section>
</template>
<script>
import DetailDialog from '@/components/DetailDialog'
import customer from '@/api/crm/customerAPI'
export default {
  model: {
    prop: 'contact',
    event: 'confirm'
  },
  props: {
    showMoreBtn: {
      type: Boolean, default: true
    },
    contact: Object,
    visible: false,
    params: {type: Object,
      default: () => {
        return {}
      }}
  },
  components: {DetailDialog},
  watch: {
    params: {
      handler (val) {
        if (val && Object.keys(val).length > 0) {
          this.search = {...val}
        }
      },
      deep: true,
      immediate: true
    }
  },
  data () {
    return {
      list: [],
      selectRow: {},
      search: {},
      totalRow: 0,
      pageSize: 3,
      hasNext: false,
      hasPrevious: false,
      pageNumber: 1,
      contactInfo: {},
      show: false,
      rules: {
        contactsName: [{ required: true, message: '不能为空', trigger: 'blur' }],
        mobile: [{ required: true, message: '不能为空', trigger: 'blur' }],
        gender: [{ required: true, message: '不能为空', trigger: 'blur' }]
      }
    }
  },
  mounted () {
    this.$keyBoard(this, 'queryList', 13, 1)
  },
  created () {
    this.queryList(1)
  },
  methods: {
    close () {
      this.$emit('update:visible', false)
    },
    handelOk (data = {}) {
      if (this.selectRow && Object.keys(this.selectRow).length > 0) {
        this.$emit('confirm', this.selectRow || data)
      }
      this.close()
    },
    handelSelect (selection) {
      this.selectRow = selection[0]
      if (selection.length > 1) {
        this.$refs.tabelRef.clearSelection()
        this.$refs.tabelRef.toggleRowSelection(selection.pop())
      }
    },
    handlePrevClick () {
      const pageNumber = this.pageNumber - 1
      this.queryList(pageNumber <= 0 ? 1 : pageNumber)
    },
    handleNextClick () {
      this.queryList(this.pageNumber + 1)
    },
    queryList (pageNumber) {
      const params = this.search
      params.pageSize = this.pageSize
      params.pageNumber = pageNumber === undefined || pageNumber <= 0 ? 1 : pageNumber
      customer.queryContactsListAPI(params).then(res => {
        this.list = res.data && res.data !== null ? res.data.list : []
        this.totalRow = res.data.totalRow
        this.hasNext = res.data.hasNext
        this.hasPrevious = res.data.hasPrevious
        this.pageNumber = res.data.pageNumber
      })
    },
    cellClass (row) {
      if (row.columnIndex === 0) {
        return 'disabledCheck'
      }
    },
    toAdd () {
      this.contactInfo = {...this.params}
      this.show = true
    },
    closeContact () {
    },
    formatterAgentSeal (row, cellInfo, cell) {
      return cell && cell === 1 ? '可以' : '不可以'
    },
    handleSaveContacts (data) {
      this.$refs.contactsForm.validate(validate => {
        if (validate) {
          customer.addContactsInfosAPI(this.contactInfo).then(res => {
            this.queryList(1)
            this.close()
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
>>>.el-table .disabledCheck .cell .el-checkbox__inner{
    display: none !important;
}
.header{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
</style>
